<!doctype html>
<html class="no-js" lang="">

<head>
  <title></title>
  <meta charset="utf-8">
  <script type="text/javascript" src="/js/dojo/dojo/dojo.js" djConfig="parseOnLoad:true, gfxRenderer:'svg,vml' "></script>
</head>

<body>
<script type="text/javascript" >
  dojo.require("dojox.gfx");

  // 旋转（Rotate）、缩放（Scale）、平移（Translate）以及倾斜（Skew）

  dojo.addOnLoad(function(){
    gTestContainer = dojo.byId('testcontainer');
    var surface = dojox.gfx.createSurface(gTestContainer, 1000, 1000);
    surface.whenLoaded(dojo.hitch(this, function() {
      //5. 创建 group，并在其中创建一个绿色圆形
      var group = surface.createGroup();
      var circle = {cx: 250, cy: 250, r: 50};
      // var shape_circle = group.createCircle(circle).setFill([0, 255, 0, 0.5]);

      var line = group.createLine({x1: 20, y1: 20, x2: 100, y2: 120})
              .setFill([255, 0, 0, 0.5]).setStroke({color: "red", width: 5});

      //6. 将画面中的红色直线移动到组对象中
      group.add(line);

      //7. 将组对象扩大至 2 倍并逆时针旋转 45 度
      // group.setTransform([dojox.gfx.matrix.translate(250, 250),
      //   dojox.gfx.matrix.rotateg(-45), dojox.gfx.matrix.scale(2),
      //   dojox.gfx.matrix.translate(-250, -250)]);

      group.setTransform([dojox.gfx.matrix.scale(2), dojox.gfx.matrix.rotateg(30), dojox.gfx.matrix.translate(50, 0)]);

      new dojox.gfx.Moveable(group)
    }))
  });
</script>
  <div id="testcontainer"></div>
</body>

</html>
